<template>
  <div>
    <textarea></textarea>
  </div>
</template>

<script>
// import CodeMirror from 'codemirror/lib/codemirror.js';

export default {
  setup(props, context) {
    let myCodeMirror = null;
    const init = (el) => {
      myCodeMirror = CodeMirror.fromTextArea(el, {
        mode: "htmlmixed",
        lineNumbers: true,
        scrollbarStyle: "null",
        autoCloseBrackets: true,
        matchBrackets: true,
        showCursorWhenSelecting: true,
        autoCloseTags: true,
        tabSize: 2,
        foldGutter: true,
        gutters: [
          "CodeMirror-linenumbers",
          "CodeMirror-foldgutter",
          "CodeMirror-lint-markers",
        ],
        autofocus: true,
        styleActiveLine: true,
      });
    };

    const getValue = () => {
      return myCodeMirror ? myCodeMirror.getValue() : "";
    };

    const setValue = (value) => {
      if (myCodeMirror) {
        myCodeMirror.setValue(value);
      }
    };
    return {
      getValue,
      setValue,
      init,
    };
  },
  mounted() {
    setTimeout(() => {
      this.init(this.$refs.textarea);
    }, 100);
  },
};
</script>
